<template>
	<div class="w100 h100 flex flex-col position-relative">
		<three3d class="three" :data="pumpInfoData" />
		<div class="f1 h0 flex-col p-t-26 p-l-10 left">
			<my-box class="f1 h0 m-b-10" title="管道间环境监测">
				<div class="flex-col h100">
					<div class="flex m-between p-10">
						<div id="btn1" class="btn" :class="{ bgc: active == 1 }" @click="active = 1">通风系统</div>
						<div id="btn2" class="btn" :class="{ bgc: active == 2 }" @click="active = 2">冷却系统</div>
					</div>
					<Transition name="fade-transform" mode="out-in" appear>
						<div class="f1 h0 overflow-y-auto" v-if="active == 1">
							<div class="flex m-between p-10" v-for="(item, index) in ventilateList" :key="index">
								<span> {{ item.fanName }}</span>
								<span> {{ item.fanState == 1 ? '正常' : '停机' }}<span :class="item.fanState == 1 ? 'start' : 'stop'" /> </span>
							</div>
						</div>
						<div class="f1 h0 overflow-y-auto" v-else>
							<div class="flex m-between p-10" v-for="(item, index) in coolingList" :key="index">
								<span> {{ item.waterTankName }}</span>
								<span> {{ item.waterTankState == 1 ? '正常' : '停机' }} <span :class="item.waterTankState == 1 ? 'start' : 'stop'" /> </span>
							</div>
						</div>
					</Transition>
				</div>
			</my-box>
		</div>
	</div>
</template>

<script setup name="comprehensive/takeGas">
import { ventilationSystem, coolingSystem, pumpInfo } from '@a/take-gas'
import three3d from './3d/takeGas.vue'

let active = ref(1)
// 通风系统数据
let ventilateList = ref([])
ventilationSystem().then((res) => {
	ventilateList.value = res.data
})

// 冷却系统数据
let coolingList = ref([])
coolingSystem().then((res) => {
	coolingList.value = res.data
})

// 瓦斯泵/管道状态
let pumpInfoData = ref({})
pumpInfo().then((res) => {
	pumpInfoData.value = res.data
})
</script>

<style lang="scss" scoped>
.left {
	color: #fff;
	position: relative;
	width: 400px;
	height: 100%;
	z-index: 2;
	background: linear-gradient(90deg, #0d1018 0%, rgba(13, 16, 24, 0.6) 67%, rgba(13, 16, 24, 0) 100%);
}
.btn {
	padding: 10px 30px;
	border-radius: 2px;
	font-size: 14px;
	color: #fff;
	background: rgba(62, 99, 176, 0.2);
	cursor: pointer;
}
.bgc {
	background: #4d88fe;
}
.start,
.stop {
	display: inline-block;
	margin-left: 5px;
	width: 8px;
	height: 8px;
	opacity: 1;
	background: #45b854;
	border-radius: 50%;
}
.stop {
	background: #e76060;
}
</style>
